import { Breadcrumb } from 'antd';

import { items } from "../router";
import { Link, useLocation } from 'react-router-dom';
const HeaderBreadcrumb = () => {

    // {路由名:{菜单名,重定向}}
    const breadcrumName: Record<string, string> = {}
    // 获取面包屑名与路由的对应关系
    const getBreadcrumbName = (menu: any[]) => {
        menu.map(item => {
            breadcrumName[item.key] = item.label
            item.children && getBreadcrumbName(item.children)
        })
    }
    getBreadcrumbName(items)
    // console.log(breadcrumName);

    // 获取路由名字
    const { pathname } = useLocation()
    // 切割路由名
    const slicePathname = pathname.slice(1).split("/")
    console.log(slicePathname);
    // 面包屑列表
    const breadcrumbItem: any = slicePathname.map((i, index) => {
        const path: string = `/${slicePathname.slice(0, index + 1).join("/")}`
        // console.log(path);
        return (
            < Breadcrumb.Item key={path} >
                <Link to={pathname}>
                    {breadcrumName[path]}
                </Link>
            </ Breadcrumb.Item >
        )
    
    })
    // console.log(breadcrumbItem);

    return (
        <>
            <Breadcrumb>
                {
                    pathname !== "/home" &&
                    <Breadcrumb.Item key="/home"><Link to={"/home"}>首页</Link></Breadcrumb.Item>
                }
                {breadcrumbItem}
            </Breadcrumb>
        </>
    )
}
export default HeaderBreadcrumb